<template>
  <div class="input-number inline-b" :style="style">
    <div class="prefix">
      <slot name="prefix" />
    </div>
    <input
      v-model="inputVal"
      :style="inputStyle"
      type="number"
      step="0.01"
      min="0"
      onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"
    />
    <div class="suffix">
      <slot name="suffix" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [Number, String]
    },
    // 宽度
    width: {
      type: Number,
      default: 200
    },
    fontsize: {
      type: Number,
      default: 14
    }
  },
  computed: {
    inputVal: {
      get() {
        return this.value;
      },
      set(n) {
        this.$emit("input", n);
      }
    },
    // 容器样式
    style() {
      return {
        width: this.width + "px"
      };
    },
    // 输入框样式
    inputStyle() {
      return {
        fontSize: this.fontsize + "px"
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.input-number {
  position: relative;
  input {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 6px 30px 6px 11px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    transition: all 0.3s;
  }
  input:hover {
    border-color: #758cff;
    border-right-width: 1px !important;
  }
  input:focus {
    outline: 0;
    border-color: #758cff;
    box-shadow: 0 0 0 2px rgb(77 101 253 / 20%);
  }
  .suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
